<extend name="public@base"/>
<block name="head">
<title>{$category.name}</title>
<style>
    .iconRow {
        text-align: center;
        padding: 10px 0px;
        
    }
    .iconRow > div {
        margin-bottom: 6px;
        text-align: center;
        color: #666;
    }
    .iconRow > div img {
        width: 50%;
    }
    .iconName {
        font-size: 16px;
        margin: 4px 0px;
    }
    .iconDesc {
        font-weight: bold;
        font-size: 24px;
    }
    .imgContent .row {
        margin-bottom: 40px;
    }
    .desc {
        color: #888;
        font-weight: bold;
        font-style: italic;
        font-size: 24px;
        padding: 20px 0px;
        line-height: 50px;
        text-align: center;
    }
    .hero-slider-item {
        height: 400px;
    }
    .hero-slider-item::before {
        background-color: transparent;
    }

    /* media */
    @media (min-width: 992px) {
        .col-md-pull-8 {
            right: 66.666667%;
        }
        .col-md-push-4 {
            left: 33.333333%;
        }
    }
    @media (min-width: 768px) and (max-width: 992px) {
        .col-sm-pull-8 {
            right: 66.666667%;
        }
        .col-sm-push-4 {
            left: 33.333333%;
        }
        .desc {
            line-height: 30px;
        }
    }
</style>
</block>
<block name="body">
        <!-- 幻灯片 -->
        <div>
            <php>
                $high_slide_id=empty($theme_vars['high_slide'])?0:$theme_vars['high_slide'];
            </php>
            <slides id="$high_slide_id">
                <div class="container" style="position: relative;">
                    <a href="{$vo.url|default=''}"><img src="{:cmf_get_image_url($vo.image)}" alt="{$vo.title|default=''}" title="{$vo.title|default=''}" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </slides>
            <noslides id="$high_slide_id">
                <div class="container" style="position: relative;">
                    <a href="__ROOT__"><img src="__TMPL__/public/assets/img/bgboat.png" alt="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" title="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </noslides>
        </div>
        
        <!-- About -->
        <section class="latest-news pt-100 pb-180 white-bg" style="padding-top: 30px;">
            <div class="container">
                <div class="hrLine"></div>
                <div class="row iconRow">
                    <div class="col-md-2 col-sm-4 col-6">
                        <div>
                            <img src="__TMPL__/public/assets/img/icon/icon1.png" alt="icon">
                        </div>
                        <div class="iconName">Length</div>
                        <div class="iconDesc"><span class="counter">{$category.more.ength_left|default=''}</span>' <span class="counter">{$category.more.ength_right|default=''}</span>"</div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-6">
                        <div>
                            <img src="__TMPL__/public/assets/img/icon/icon2.png" alt="icon">
                        </div>
                        <div class="iconName">Make</div>
                        <div class="iconDesc">{$category.more.make|default=''}</div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-6">
                        <div>
                            <img src="__TMPL__/public/assets/img/icon/icon3.png" alt="icon">
                        </div>
                        <div class="iconName">Staterooms</div>
                        <div class="iconDesc counter">{$category.more.staterooms|default=''}</div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-6">
                        <div>
                            <img src="__TMPL__/public/assets/img/icon/icon4.png" alt="icon">
                        </div>
                        <div class="iconName">Baths</div>
                        <div class="iconDesc counter">{$category.more.baths|default=''}</div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-6">
                        <div>
                            <img src="__TMPL__/public/assets/img/icon/icon5.png" alt="icon">
                        </div>
                        <div class="iconName">Guests</div>
                        <div class="iconDesc counter">{$category.more.guests|default=''}</div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-6">
                        <div>
                            <img src="__TMPL__/public/assets/img/icon/icon6.png" alt="icon">
                        </div>
                        <div class="iconName">Crew</div>
                        <div class="iconDesc counter">{$category.more.crew|default=''}</div>
                    </div>
                </div>
                <div class="hrLine" style="margin-top: 0px;"></div>
            </div>
            <div class="container imgContent" style="padding: 40px 0px;">
                <portal:articles order="post.create_time DESC" page="theme_vars.page_count" relation="categories" categoryIds="$category.id">
                    <div class="row">
                        <div class="col-md-8 col-sm-12 col-12 <if condition="$key%2 eq 1">col-md-push-4 col-sm-push-4</if>">
                            <div>
                                <div class="mainSalon">
                                    <div class="hero-slider owl-carousel owl-theme owl-theme-1">
                                        <foreach name="vo.more.photos" item="st" key="i">
                                            <div class="hero-slider-item item-bg-{$i}" style="background-image:url({$st.url|default='__TMPL__/public/assets/img/indexpackage.png'|cmf_get_image_url})" ></div>
                                        </foreach>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12 col-12 <if condition="$key%2 eq 1">col-md-pull-8 col-sm-pull-8</if>">
                            <div>
                                <h3 class="specialTitle">{$vo.post_title}</h3>
                                <div class="hrLine"></div>
                                <div class="desc">
                                    {$vo.post_excerpt}
                                </div>
                                <div class="hrLine" style="margin-top: 0px;"></div>
                            </div>
                        </div>
                    </div>
                </portal:articles>
            </div>
        </section>
        <!-- End About -->
</block>